<p>sthome {{name}} works!</p>
<button (click)="handlerOutLogin()">退出</button>
<hr>
{{age}}{{isHome}}{{desc}}{{date}}
{{1+1}}
<hr>
<!-- 属性绑定使用的语法是[属性名]  -->
<div [id]="'box'">属性绑定</div>
<div [id]="box">属性绑定</div>

<!-- class渲染方式 -->
<!-- 单一类绑定 -->
<p [class]="'item'">class绑定</p>
<p [class]="itemClass">class绑定</p>
<p [class.itemClass]="true">class绑定</p>

<h3 [class]="homeClasses">多类名绑定</h3>
<h3 [class]="{'h3-dom':false,'title-dom':true}">类名条件渲染</h3>
<h3 [class]="['h3-dom','title-dom']">class数组渲染</h3>
<h3 [ngClass]="{'active': isActive}">ngClass绑定</h3>

<!-- 样式绑定 -->
<h3 [style.width]="'300px'">单一样式绑定</h3>
<h3 [style.color]="'red'">单一样式绑定</h3>
<h3 [style.width.px]="'300'">单一样式绑定</h3>

<h3 [style]="'background:red;color:#fff'">多样式绑定</h3>
<h3 [style]="{'background':'red','color':'#fff'}">多样式绑定</h3>

<h3 [ngStyle]="{'color': 'red'}">ngStyle样式绑定</h3>
<h3 [ngStyle]="{'font-size': !isMax ? '24px' : '12px'}">ngStyle样式绑定</h3>

<!-- 条件判断语法 -->
<div *ngIf="isMax">isMax==true</div>
<div *ngIf="!isMax">isMax==false</div>

<!-- 解析完 -->
<ng-template [ngIf]="isMax">
  <div>isMax==true</div>
</ng-template>
<hr>
<ng-container *ngIf="isMax; else elseTemplate">
  <div>isMax==true</div>
</ng-container>
<ng-template #elseTemplate>
  <div>isMax==false</div>
</ng-template>

<!-- 循环语句 -->
<!-- for -->
<div *ngFor="let item of colors let in=index let isOdd=odd">
  {{isOdd}}
  {{in}}
  {{item}}
</div>
<hr>
<ng-template ngFor let-color [ngForOf]="colors" let-i="index" let-odd="odd">
  <div>{{odd}} {{i}} {{color}}</div>
</ng-template>
<hr>
<ng-template ngFor [ngForOf]="colors" let-color let-i="index" let-odd="odd">
  <div>{{odd}} {{i}} {{color}}</div>
</ng-template>

<!-- Switch -->
<div [ngSwitch]="type">
  <p *ngSwitchCase="1">
    type=1
  </p>
  <p *ngSwitchCase="2">
    type=2
  </p>
  <p *ngSwitchDefault>
    type!=1&& type!=2
  </p>
</div>

<!-- 事件绑定  (事件类型) = "执行函数" -->
<input type="text" (input)="inpChange($event)">
<button (click)="clickFun($event)">点击</button>
<hr>
<!-- 模板引用变量 -->
<input #userName type="text" placeholder="请输入用户名">
<button (click)="getUserName(userName.value)">获取userName</button>
<span>{{userName.value}}</span>
<hr>
<!-- 双向绑定 ngModel只对表单元素有效 -->
<input [(ngModel)]="titlemodel" type="text">
<p>标题:{{titlemodel}}</p>
<hr>
<!-- 动态表单控件 -->
年龄：<input type="text" [formControl]="ageForm">
<br>
<p>年龄：{{ageForm.value}}</p>
<button (click)="ageChangeFun()">长大18岁</button>
<hr>
<!-- 动态表单控件组 -->
<form [formGroup]="loginForm">
  <label>
    账号: <input required type="text" formControlName="userName">
  </label>
  <br>
  <label>
    密码: <input type="password" formControlName="password">
  </label>
  <br>
  <button (click)="subFormFun()">提交</button>
</form>
<hr>

<!-- 表单验证 -->
<form  action="">
  账号：<input required #nameInp="ngModel" type="text" [(ngModel)]="fromData.name" name="userName">
  <span *ngIf="!nameInp.valid">请输入账号</span>
  <br>
  密码：<input required  #pasInp="ngModel" type="text" [(ngModel)]="fromData.password" name="password">
  <span>验证结果：{{pasInp.valid }}</span>
  <br>
  <button (click)="subBtnFun(nameInp)">提交</button>
</form>
<hr>
<!-- 自定义表单验证 -->
<form [formGroup]="valiDataForm">
  <label>
    账号: <input required type="text" formControlName="userName">
  </label>
  <p *ngIf="valiDataForm.get('userName')?.errors?.['required']">请输入账号</p>
  <p *ngIf="valiDataForm.get('userName')?.errors?.['minlength']?.requiredLength
  ||valiDataForm.get('userName')?.errors?.['maxlength']?.requiredLength">账号长度在6-18位之间</p>
  <br>
  <label>
    密码: <input type="password" formControlName="password">
  </label>
  <p *ngIf="valiDataForm.get('password')?.errors?.['msg']">{{valiDataForm.get('password')?.errors?.['msg']}}</p>
  <br>
  <label>
    手机号: <input type="text" formControlName="phone">
  </label>
  <p *ngIf="valiDataForm.get('phone')?.errors?.['msg']">{{valiDataForm.get('phone')?.errors?.['msg']}}</p>
  <br>
  <button (click)="subvaliDataFormFun()">提交</button>
</form>
<hr>
<!-- 管道 -->
{{dateStr}}
<p>{{dateStr | date:'yyyy-MM-dd HH:mm:ss'}}</p>
<p>{{nameStr | uppercase | lowercase}}</p>
<p>{{nameStr | test}}</p>
<!-- 服务 -->
<p *ngFor="let item of list">{{item}}</p>